<template>
  <div>
    <transition>
      <el-badge
        v-if="isShow"
        ref="dragIcon"
        class="dragIcon"
        :style="{left: left + 'px',top: top + 'px',width: itemWidth + 'px',height: itemHeight + 'px'}"
        :value="text"
        @touchstart.stop="handleTouchStart"
        @touchmove.prevent.stop="handleTouchMove($event)"
        @touchend.stop="handleTouchEnd"
      >
        <div @click="handleShow">对比</div>
      </el-badge>
    </transition>
    <!-- 列表 -->
    <div class="vue-popup">
      <div v-show="boxShow" class="mask" @click="handleShow"></div>
      <transition name="slide">
        <div v-show="boxShow" class="popup-content">
          <div class="head">对比</div>
          <div class="content">
            <!-- 添加对比内容 -->
            <div v-for="(tag,i) in tags" :key="tag.name" class="exist">
              <el-tag closable type="info" @close="handleClose(i)">{{ tag.name }}</el-tag>
            </div>
            <el-input v-model="searchContent" placeholder="请输入搜索内容" class="input-with-select">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
            <!-- 搜索对比内容选择 -->
            <div class="search-List"></div>
            <div class="bottom">
              <div class="left">
                <el-button type="primary" class="btn">开始对比</el-button>
                <div>最多5个</div>
              </div>
              <div class="clear" @click="handleClear">清空</div>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
// import Popout from '@/components/Popout'
export default {
  // components: {
  //   Popout
  // },
  props: {
    text: {
      type: String,
      default: '0'
    },
    itemWidth: {
      type: Number,
      default: 50
    },
    itemHeight: {
      type: Number,
      default: 30
    }
  },
  data() {
    return {
      left: 0,
      top: 0,
      startToMove: false,
      isShow: true,
      timer: null,
      currentTop: null,
      clientW: document.documentElement.clientWidth, // 视口宽
      clientH: document.documentElement.clientHeight, // 视口高
      boxShow: false,
      searchContent: '',
      tags: [
        { name: '标签一的说法打' },
        { name: '标签二打发大丰收大姐夫哈手机东方红郡阿萨德回复打' },
        { name: '标签三打发打发打发' },
        { name: '标签四' },
        { name: '标签五' }
      ]
    }
  },
  created() {
    this.left = (this.clientW - this.itemWidth - 30)
    this.top = (this.clientH / 2 - this.itemHeight / 2)
  },
  mounted() {
    this.bindScrollEvent()
  },
  beforeDestroy() {
    // 记得销毁一些全局的的事件
    this.removeScrollEvent()
  },
  methods: {
    // 点击显示弹框
    handleShow() {
      if (this.boxShow === false) {
        this.boxShow = true
      } else {
        this.boxShow = false
      }
      // this.$emit('confirm', this.userObjs)
    },
    handleCancel() {
      this.boxShow = false
      // this.$emit('cancel')
    },
    // 移除对比数据
    handleClose(tag) {
      this.tags.splice(tag, 1)
    },
    handleClear() {
      this.tags = []
    },
    handleTouchStart() {
      this.startToMove = true
      this.$refs.dragIcon.style.transition = 'none'
    },
    handleTouchMove(e) {
      const clientX = e.targetTouches[0].clientX// 手指相对视口的x
      const clientY = e.targetTouches[0].clientY// 手指相对视口的y
      const isInScreen = clientX <= this.clientW && clientX >= 0 && clientY <= this.clientH && clientY >= 0
      if (this.startToMove && e.targetTouches.length === 1) {
        if (isInScreen) {
          this.left = clientX - this.itemWidth / 2
          this.top = clientY - this.itemHeight / 2
        }
      }
    },
    handleTouchEnd() {
      if (this.left < (this.clientW / 2)) {
        this.left = 30// 不让贴边 所以设置30没设置0
        this.handleIconY()
      } else {
        this.left = this.clientW - this.itemWidth - 30// 不让贴边 所以减30
        this.handleIconY()
      }
      this.$refs.dragIcon.style.transition = 'all .3s'
    },
    handleIconY() {
      if (this.top < 0) {
        this.top = 30// 不上帖上边所以设置为30 没设置0
      } else if (this.top + this.itemHeight > this.clientH) {
        this.top = this.clientH - this.itemHeight - 30// 不让帖下边所以减30
      }
    },
    bindScrollEvent() {
      window.addEventListener('scroll', this.handleScrollStart)
    },
    removeScrollEvent() {
      window.removeEventListener('scroll', this.handleScrollStart)
    },
    handleScrollStart() {
      this.isShow = false
      this.timer && clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.handleScrollEnd()
      }, 300)
      this.currentTop = document.documentElement.scrollTop || document.body.scrollTop
    },
    handleScrollEnd() {
      this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      // 判断是否停止滚动的条件
      if (this.scrollTop === this.currentTop) {
        this.isShow = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dragIcon {
  position: fixed;
  width: 50px;
  height: 30px;
  border-radius: 10%;
  border:1px solid orange;
  line-height: 30px;
  text-align: center;
  font-size: 14px;
  color: rgb(29, 28, 28);
  cursor: pointer;
}
.vue-popup {
  .popup-content {
      position: fixed;
      height:99.7%;
      top: 0;
      right: 0;
      width: 300px;
      background-color: white;
      -webkit-transition: all 0.2s ease-in;
      transition: all 0.2s ease-in;
      border: 1px solid #ccc;
      .head{
        text-align: center;
        background: #409EFF;
        color: #fff;
        padding: 10px 0;
      }
      .content{
        margin: 20px;
        ::v-deep {
          .el-tag {
            white-space: normal;
            height: auto;
          }
        }
        .exist{
          margin-bottom: 10px;
        }
        .bottom{
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: 10px 0;
          color: #999999;
          .left{
            display: flex;
            align-items: center;
            .btn{
               margin-right: 5px;
            }
          }
          .clear{
            cursor: pointer;
          }
        }
      }
  }
}
.mask {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    height: 100%;
    // background-color: rgba(0, 0, 0, 0.4);
    transition: all 0.2s ease-in;
}

.slide-enter-active ,.spread {
    animation-name: slideInUp;
    animation-duration: 0.2s;
    animation-fill-mode: both;
}
.slide-leave-active,.packUp {
    animation-name: slideOutDown;
    animation-duration: 0.2s;
    animation-fill-mode: both;
}
@keyframes slideInUp {
    0% {
        transform: translate3d(100%,0,0);
        visibility: visible;
    }

    to {
        transform: translateZ(0);
    }
}
@keyframes slideOutDown {
    0% {
        transform: translateZ(0);
    }

    to {
        visibility: hidden;
        transform: translate3d( 100%,0, 0);
    }
}
.delay-leave-active {
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    -o-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

</style>
